<template>
  <div class="app-container" style="width:100%;">
    <el-aside style="padding-right: 10px; padding-left: 15px; padding-top: 0px;float:left;width:30%;background:none;">
      <div class="block" style="width:100%;height:500px;">
        <el-tree
          id="el-tree"
          ref="tree"
          class="filter-tree"
          :data="data2"
          node-key="id"
          :highlight-current="true"
          :props="defaultProps"
          :default-expanded-keys="TreeArr"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          @node-contextmenu="rightClick"
        />
        <div v-show="menuVisible">
          <ul id="menu" class="menu">
            <li id="menu_item" class="el-icon-circle-plus-outline" @click="onNewData">&nbsp;新增下级目录</li>
            <li id="menu_item" class="el-icon-edit-outline" @click="handleEdit">&nbsp;编辑目录</li>
            <li id="menu_item" class="el-icon-edit-outline" @click="onRemove">&nbsp;删除目录</li>
          </ul>
        </div>
      </div>
    </el-aside>
    <el-aside style="padding-right: 5px; padding-left: 5px; padding-top: 0px;float:left;width:70%;background:none;">
      <el-form ref="form" label-width="80px" style="margin: 0 auto;width:50%;">
        <el-form-item label="上级目录" style="margin-top:50px;">
          <el-select v-model="parentId" style="width:100%;" disabled>
            <el-option v-for="item in data" :key="item.id" :label="item.typeName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" style="margin-top:50px;">
          <el-input v-model="typeName" style="width:100%;" :disabled="upVisible1" />
        </el-form-item>
        <el-form-item label="目录类型" style="margin-top:50px;">
          <el-select v-model="flag" clearable style="width:100%;" :disabled="upVisible1">
            <el-option v-for="item in fenleiList" :key="item.code" :label="item.name" :value="item.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序号" style="margin-top:50px;">
          <el-input v-model="sortNum" style="width:100%;" :disabled="upVisible1" />
        </el-form-item>
      </el-form>
      <div v-show="!upVisible1" style="margin: 0 auto; width:50%;padding-left:50px;padding-top:50px;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button type="danger" @click="resetForm">重置</el-button>
      </div>
    </el-aside>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui'
import { getDictListByCode } from '@/api/dict'

import { saveData, deleteInLogic, getTreeListInAuthority, getInfo } from '@/api/catalogDetail'

export default {
  name: 'Zzjg',
  inject: ['getList'],
  props: {
    proid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      TreeArr: [],
      IdArr: [],
      data: [],
      data2: [],
      form: {},
      defaultProps: {
        children: 'children',
        label: 'typeName'
      },
      optionProps: {
        value: 'id',
        children: 'children',
        label: 'typeName',
        checkStrictly: true,
        expandTrigger: 'hover'
      },
      id: '',
      parentId: '',
      typeName: '',
      sortNum: '',
      flag: '',
      fenleiList: [],
      upVisible1: false,
      DATA: null, // 记录右键点击节点对象数据
      NODE: null, // 记录右键点击节点
      menuVisible: false
    }
  },
  created() {
    this.getDictEntry('CDS_CATALOG_TYPE')
  },
  methods: {
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_CATALOG_TYPE') {
          this.fenleiList = response.data
        }
      })
    },
    getDetailed() {
      this.data = []

      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      getTreeListInAuthority({ classifyId: this.proid }).then(response => {
        this.data = response.data

        this.data2 = this.buildTree2(this.data)
        this.data2.forEach(m => {
          this.TreeArr.push(m.id)
        })
        loading.close()
      }).catch(response => {
        loading.close()
      })
    },
    buildTree2(data) {
      var rdata = []
      for (let i = 0; i < data.length; i++) {
        var e1 = data[i]
        if (e1.parentId === '1') {
          rdata.push(e1)
        }
        for (let j = 0; j < data.length; j++) {
          var e2 = data[j]
          if (e1.parentId === e2.id) {
            if (!e2.children) {
              e2.children = []
            }
            e2.children.push(e1)
          }
        }
      }
      return rdata
    },
    // 右键点击
    rightClick(MouseEvent, object, Node, element) { // 鼠标右击触发事件 鼠标点击事件 对象（数据） 节点 元素
      this.DATA = object
      this.NODE = Node

      this.menuVisible = true // 弹出框1隐藏
      var menu = document.querySelector('#menu')
      document.addEventListener('click', this.foo) // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
      menu.style.display = 'block'
      menu.style.left = MouseEvent.clientX + 30 + 'px' // 右键弹出框横向位置
      menu.style.top = MouseEvent.clientY - 10 + 'px' // 右键弹出框纵向位置
    },
    // 取消鼠标监听事件 菜单栏
    foo() {
      this.menuVisible = false
      this.menu0Visible = false
      document.removeEventListener('click', this.foo) // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    handleNodeClick(node, data, value) {
      getInfo({ code: node.id }).then(response => {
        var form = response.data.catalogDetail
        this.parentId = form.parentId
        this.typeName = form.typeName
        this.sortNum = form.sortNum
        this.flag = form.flag

        this.upVisible1 = true
      })
    },
    handleEdit() {
      getInfo({ code: this.DATA.id }).then(response => {
        var form = response.data.catalogDetail
        this.id = this.DATA.id
        this.parentId = form.parentId
        this.typeName = form.typeName
        this.sortNum = form.sortNum
        this.flag = form.flag

        this.upVisible1 = false
      })
    },
    onNewData() {
      this.$refs['form'].resetFields()
      this.parentId = this.DATA.id
      this.typeName = ''
      this.sortNum = parseInt(this.DATA.sortNum) + 1
      this.flag = '1'

      this.upVisible1 = false
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.id = ''
      this.parentId = ''
      this.typeName = ''
      this.sortNum = ''
      this.flag = '1'

      this.upVisible1 = false
    },
    onSave() {
      if (!this.typeName) {
        this.$message.error('目录名称不能为空')
        return
      } else if (!this.flag) {
        this.$message.error('目录类型不能为空')
        return
      } else if (!this.sortNum) {
        this.$message.error('排序号不能为空')
        return
      } else {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })

        if (this.id) {
          this.form.id = this.id
          this.form.parentId = this.parentId
          this.form.typeName = this.typeName
          this.form.sortNum = this.sortNum
          this.form.flag = this.flag
          this.form.classifyId = this.proid
          saveData(this.form).then(response => {
            Message({
              message: '新增成功',
              type: 'success',
              duration: 5 * 1000
            })

            loading.close()
            this.getDetailed()
            this.resetForm()
            // 重新加载表格
            this.getList()
          }).catch(response => {
            loading.close()
            this.getDetailed()
            // 重新加载表格
            this.getList()
          })
        } else {
          this.form.parentId = this.parentId
          this.form.typeName = this.typeName
          this.form.sortNum = this.sortNum
          this.form.flag = this.flag
          this.form.classifyId = this.proid
          saveData(this.form).then(response => {
            Message({
              message: '新增成功',
              type: 'success',
              duration: 5 * 1000
            })

            loading.close()
            this.getDetailed()
            this.resetForm()
            // 重新加载表格
            this.getList()
          }).catch(response => {
            loading.close()
            this.getDetailed()
            // 重新加载表格
            this.getList()
          })
        }
      }
    },
    onRemove() {
      if (this.id !== null && this.id !== undefined && this.id !== '') {
        MessageBox.confirm('确认删除', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '删除中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          deleteInLogic({ ids: this.id, status: '-1' }).then(response => {
            Message({
              message: '删除成功',
              type: 'success',
              duration: 5 * 1000
            })
            loading.close()
            this.getDetailed()
            this.resetForm('form')
          }).catch(response => {
            loading.close()
          })
        })
      } else {
        Message({
          message: '请选择左侧目录',
          type: 'error',
          duration: 5 * 1000
        })
      }
    }
  }
}
</script>

<style>

.el-input.is-disabled .el-input__inner {
  background-color: #F5F7FA !important;
  color: #000 !important;
  cursor: not-allowed;
}
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #F5F7FA;
  border-color: #dfe4ed;
  color: #000000;
  cursor: not-allowed;
}
.el-radio__input.is-disabled + span.el-radio__label {
  color: #000000;
  cursor: not-allowed;
}
.menu {
  width: 120px;
  line-height: 30px;
  position: fixed;
  border: 1px solid #ccc;
  font-size: 14px;
  font-family: "黑体";
  color: #474a4d;
  font-weight: 100;
  background-color: white;
  list-style: none;
  padding-left: 10px;
  z-index: 999;
}
</style>
